<template>
    <div class="top">
        <div class="columns is-multiline">
            <div class="column is-one-quarter " v-for="show in shows">
                <show-card :show="show"></show-card>
            </div>
        </div>
    </div>
</template>
<script>
    import ShowCard from "./ShowCard";
    import {api} from '@/tools/api'
    export default {
        name: 'cate',
        data () {
            return {
                shows: []
            }
        },
        props: ['collections', 'albums'],
        components: {
            // <my-component> 将只在父模板可用
            'show-card': ShowCard
        },
        watch: {
            '$route': 'fecthData'
        },
        methods: {
            fecthData() {

                let that = this
                let cateName = this.$route.params.id
                if (this.$route.name == 'Search') {
                    api.get('/rrv/search/' + this.$route.params.keyword)
                        .then(function (response) {
                            console.log(response);
                            that.shows = response.data.data.results
                        })
                        .catch(function (error) {
                            console.log(error);
                        });
                    return;
                }


                if (cateName == '最新') {
                    that.shows = that.collections.find((ele, idx, arr) => ele.title == '最新更新').seasonList;

                } else if (cateName == '英剧') {
                    that.shows = that.collections.find((ele, idx, arr) => ele.title == '英剧').seasonList;
                } else if (cateName == '综艺') {
                    that.shows = that.collections.find((ele, idx, arr) => ele.title == '娱乐').seasonList;
                } else if (cateName == '合集') {
                    this.shows = this.albums
                } else if (cateName == '已看') {

                    let showString = window.localStorage.getItem('shows')
                    let showArray = []
                    if (showString) {
                        showArray = JSON.parse(showString)
                    }
                    this.shows = showArray
                } else if (cateName == '公开课') {
                    that.shows = that.collections.find((ele, idx, arr) => ele.title == '公开课').seasonList;
                } else if (cateName == '人气') {
                    api.get('http://www.mojotv.cn/rrv/hot')
                        .then(function (response) {

                            response.data.data.seasonRankingList.forEach((season) => {
                                season.cover = season.url
                                season.brief = season.shortBrief
                            })

                            that.shows = response.data.data.seasonRankingList
                        })
                        .catch(function (error) {
                            console.log(error);
                        });
                } else if (cateName == '好评') {
                    api.get('http://www.mojotv.cn/rrv/top')
                        .then(function (response) {
                            that.shows = response.data.data.results
                        })
                        .catch(function (error) {
                            console.log(error);
                        });
                } else {
                    api.get('http://www.mojotv.cn/rrv/category/' + cateName + '/pages/30')
                        .then(function (response) {
                            that.shows = response.data.data.results
                        })
                        .catch(function (error) {
                            console.log(error);
                        });
                }
            }
        },

        created(){
            this.fecthData()
        },
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
